<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

      <!--      <div class="search-ctrl f-l">
              <form style="height: 100%;">
                <input placeholder="根据应急物资名称查询" @keyup="defaultLoad($event)" v-model="searchContent" class="search-text">
                &lt;!&ndash;    <button class="search-btn btn btn-default" type="button">更多条件</button>&ndash;&gt;
                <button class="search-btn btn btn-info" @click="searchDotResource" type="button">搜索</button>
              </form>
            </div>-->

      <div class="btns f-r">
       <!-- <button type="button" class="btn btn-info" @click="toggleAddModal">新增</button>
        <button type="button" class="btn btn-warning" @click="toggleRevampModal">修改</button>-->
        <button type="button" class="btn btn-info" @click="toggleModal('add')">新增</button>
        <button type="button" class="btn btn-warning" @click="toggleModal('updata')">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteFn">删除</button>
        <!--      <button type="button" class="btn btn-success" @click="isDetailsModalFn">详情</button>-->
        <!--   <button type="button" class="btn btn-info">添加重点人关系</button>
           <button type="button" class="btn btn-danger">删除重点人关系</button>-->
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRow.list"
            @click="selectRow(trs,index)"
            :class="{active: index === isActive}"
          >
            <td v-for="tds in tableHeader">
              {{[trs,tds.key] | TimeFilter }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="tableRow.total !== 0"
        v-if="tableRow"
        :showItem="10"
        :pageSize="20"
        :allDataSum="tableRow.total"
        :allpage="(Math.ceil(tableRow.total/20))"
        @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增与修改-->
    <SpecialistArrTableModal
      :modalData="modalData"
      @closeModal="closeModalFn"
    ></SpecialistArrTableModal>

  </div>
</template>

<script>
    import Pages from "../../sudoku/atom/pages.vue"
    import SpecialistArrTableModal from "./SpecialistArrTableModal"

    import SearchPublic from "../../publicTemplate/search/SearchPublic"
    export default {
        name: "SpecialistArrTable",
        data(){
          return{
            isActive:-1,
            selectRowId:"",
            tableHeader:[
              {"key":"groupName","value":"专家组名称"},
              {"key":"comment","value":"备注"},
              {"key":"createTime","value":"创建时间"},
              {"key":"userName","value":"更新人"},
            ],
            tableRow:[],
            tableRowParams : {
              pageIndex:"1", //当前页
              pageSize:"20", //数量
            },
            modalData:{
              isShow:false,
              upUserId:"",
              urlType:"",
              id:"",
              title:""
            },
            addModalObj:{
              isShow:false,
              upUserId:""
            },
            RevampModalObj:{
              isShow:false,
              upUserId:""
            },
            searchContent:"", //搜索设备号
            isDetailsModal:false, //是否为查看界面
            imgSrc:"",
            params : {
              pageSize:"20",
              pageIndex:"1",
              groupName:"",//名称
              comment:"",//备注
              createUser:"",//创建人
            },
            searchObj:{
              condition:[
                {"title":"专家组名称","key":"groupName",'type':'text',"value":''}
              ],
              htmlType:"searchDefaultPublic",
            }
          }
        },
        components:{
          Pages,
          SpecialistArrTableModal,
          SearchPublic
        },
        created(){
          this.tableRowAjax();
        },
        methods:{
          //加载表格
          tableRowAjax(){
            //清除选择
            this.clearSelect();
            this.$axios.get(this.HOST+"/benchmark/expertsgroup",{
              params:this.params
            })
              .then((data)=>{
                //console.log(data);
                this.tableRow = data.data.data;
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //翻页加载
          tablePageData(page){
            this.params.pageIndex = page;
            this.tableRowAjax();
            ////console.log(page);
          },
          //新增与修改展示
          toggleModal(type){
          /*  console.log(this.modalData.id);
            console.log(type === "updata");*/
            if( type === "updata" && this.modalData.id === "" ){
              this.s_alert("请选择需求修改的专家组！");
              return false;
            }

            if( type === "add" ){
              this.modalData.title = '新增专家组信息' ;
            }else if( type === "updata" ){
              this.modalData.title = '修改专家组信息' ;
            }
            //urlType
            this.modalData.urlType = type==="add" ? 'add' : 'updata';
            this.modalData.isShow = !this.modalData.isShow;
            if( this.modalData.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          closeModalFn(){
            this.modalData.isShow = !this.modalData.isShow;
            if( this.modalData.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          //新增弹窗显示与隐藏
          toggleAddModal(){
            this.addModalObj.isShow = !this.addModalObj.isShow;
            if( this.addModalObj.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          //修改弹窗显示与隐藏
          toggleRevampModal(){
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = false;
            }else{
              this.s_alert("请选择需要修改的专家组！");
            }
            if( this.RevampModalObj.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          //搜索功能
          searchDotResource(){
            if( this.searchContent === "" ){
              this.params.conditions = [];
            }else{
              this.params.conditions = [
                {"field":"NAME","symbol":"like","value":"%"+this.searchContent+"%"}
              ];
            }
            this.tableRowAjax();
          },
          //选择行
          selectRow(obj,index){
            console.log(obj);
            this.modalData.dataObj = obj;
            this.selectRowId = obj.id;
            this.modalData.id = obj.id;
            this.isActive = index;
          },
          //查看详情
          isDetailsModalFn(){
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = true;
            }else{
              this.s_alert("请选择需要查看的专家组！");
            }
          },
          //删除
          deleteFn(){
            //DELETE /benchmark/expertsgroup/delete
            if( this.selectRowId !=="" ){
              let msg = confirm("请问是否删除该专家组？");
              if( msg ){
                //DELETE /base/remove
                this.$axios.delete(this.HOST+"/benchmark/expertsgroup/delete",{
                  params:{
                    id:this.selectRowId
                  }
                })
                  .then((data)=>{
                    this.s_alert("删除成功！");
                    this.tableRowAjax();
                  })
                  .catch((err)=>{
                    this.s_alert("删除失败！");
                    //console.log(err);
                  })
              }
            }else{
              this.s_alert("请选择需要删除的专家组！");
            }
          },
          //搜索
          searchParamsFn(searchParams){
            //console.log(this.searchObj.condition);
            for( let paramsKey in this.params ){
              for( let i=0;i<this.searchObj.condition.length;i++ ){
                if( paramsKey === this.searchObj.condition[i].key ){
                  this.params[paramsKey] = this.searchObj.condition[i].value
                }
              }
            }
            this.tableRowAjax();
          },
          //清除选择
          clearSelect(){
            this.isActive=-1;
            this.selectRowId="";
            //this.modalData.id = "";
            this.modalData={
              isShow:false,
              upUserId:"",
              urlType:"",
              id:"",
              title:""
            }
          }
        }
    }
</script>

<style scoped>

</style>
